
import React from 'react';
import { Modal, Button,Form,Input,Table,Col } from 'antd';
import * as Utils from "../../utils/action";
import TextArea from 'antd/lib/input/TextArea';
//双击选择table里的一行数据  然后关闭modal  回显到父组件响应的搜索框
// apiService  需要调用的接口文件  apiPath 接口文件的具体方法  parameter 搜索框的值和参数名
class APP extends React.Component {
  state = {
      tableData:[],
      pagination:{
        pageSize: 10,
        current: 1,
      },
      loading:false,
      parameter:{}//接收传递过来的参数
  };
  componentDidMount() {
    this.props.onRef(this);
  }
  componentWillReceiveProps(nextProps){
    if(nextProps.parameter.value){
      const json={};
      json[nextProps.parameter.name]=nextProps.parameter.value;
      this.setState({parameter:json})
      this.fetch(json);
    }
  }
  fetch=(para)=>{
    this.setState({loading:true})
    this.props.apiService[`${this.props.apiPath}`](para).then(data=>{
      const pagination = { ...this.state.pagination };
      pagination.total = data.data.total;
      pagination.onChange = (current, pageSize) => {
        pagination.pageSize = pageSize;
        pagination.current = current;
        this.setState({ pagination });
        this.fetch({pageNum:current,pageSize,...this.state.parameter});
      }
      // pagination.showSizeChanger=true;
      // pagination.onShowSizeChange = (current, pageSize) => {
      //   pagination.pageSize = pageSize;
      //   pagination.current = current;
      //   this.setState({ pagination });
      //   this.fetch(str);
      // }
      pagination.showTotal = total => `共 ${total} 条数据`
      this.setState({
        tableData:data.data.data,
        loading:false,
        pagination
      })
    })
  }
  
  modalSubmit=()=>{
    this.props.modalSubmit();
  }

  closeModal = () => {
    const p = this;
    const { onCancel } = p.props;
    // form.resetFields();
    onCancel();
  };

  onRowDoubleClick=(record)=>{
    this.props.onRowDoubleClick(record);
    this.closeModal();
  }
  
  render(){
    const p = this;
    const { visible, title,width,column,data } = this.props;
    const modalProps = {
      title,
      visible,
      width,
      onCancel() {
        p.closeModal();
      },
      footer:null,
      // okText:'保存',
      cancelText:'取消',
      // onOk(){
      //   p.modalSubmit();
      // }
    };

    return(
      <Modal {...modalProps}>
         {/* <div style={{width:'100%',display:'flex',marginBottom:'1rem'}}><span style={{width:'10%'}}>备注:</span><TextArea onChange={this.inputChange}/></div> */}
                <Table columns={column} dataSource={p.state.tableData}  rowKey={(_,i)=>i} pagination={p.state.pagination} loading={this.state.loading}
                    onRowDoubleClick={(record) => 
                      this.onRowDoubleClick(record)
                  }/>
       </Modal>
    )
  }
}


export default Form.create({})(APP);
